import React from 'react'
import { Button, Checkbox, Form, Input } from 'antd'

const LoginForm = () => {
  const onFinish = values => {
    console.log('Success:', values)
  }

  const onFinishFailed = errorInfo => {
    // console.log('Failed:', errorInfo)
    console.log('失败')
  }

  return (
    <Form
      // 标签占用的栏数
      labelCol={{
        span: 6
      }}
      // 表单项占用的栏数
      wrapperCol={{
        span: 14
      }}
      autoComplete="off"
      // 表单验证成功后，会触发的事件
      onFinish={onFinish}
      // 表单验证失败后，会触发事件
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="账号："
        // 用户表单数据接受时的属性名称
        name="username"
        // 表单项验证
        rules={[
          // 规则
          // required必填，但是它不能过滤空格
          { required: true, message: '账号不能为空' },
          // 自定义验证规则
          {
            validator: (rule, value) => {
              // if (value.trim().length === 0) {
              if (/^\s/.test(value)) {
                return Promise.reject('不能以空格')
              }
              return Promise.resolve('')
            }
          }
        ]}
      >
        {/* 如果Input写在Form.Item组件子元素，而且Item它还设置了name属性,则input无需管理 */}
        <Input />
      </Form.Item>

      <Form.Item
        label="密码："
        name="password"
        rules={[
          {
            required: true,
            message: '密码不能为空'
          }
        ]}
      >
        <Input />
        {/* <Input.Password /> */}
      </Form.Item>

      <Form.Item
        name="remember"
        valuePropName="checked"
        wrapperCol={{
          offset: 6,
          span: 14
        }}
      >
        <Checkbox>记住我</Checkbox>
      </Form.Item>

      <Form.Item
        wrapperCol={{
          offset: 6,
          span: 14
        }}
      >
        <Button type="primary" htmlType="submit">
          进入后台
        </Button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <Button type="default">重置表单</Button>
      </Form.Item>
    </Form>
  )
}

export default LoginForm
